<template>

	<div>
		<swiper class='swiper' ref='swiper'>
			<slide @click="clickMe"><img src="static/img-Swiper/swiper1.jpg" /></slide>
			<slide @click="clickMe"><img src="static/img-Swiper/swiper2.jpg" /></slide>
			<slide @click="clickMe"><img src="static/img-Swiper/swiper3.jpg" /></slide>
		</swiper>

	</div>

</template>

<script>
	import { Swiper, Slide } from 'vue-swiper-component'

	export default {
		name: 'xxx',
		data() {
			return {
				arrImg: ['swiper1.jpg', 'swiper2.jpg', 'swiper3.jpg']
			}
		},
		components: {
			Swiper,
			Slide
		},
		methods: {
			clickMe: function() {
				this.$refs.swiper.nextSlide(); // 下一张图
			}
		}

	}
</script>

<style scoped>
	.swiper {
		width: 100%;
		height: 8rem;
	}
	
	.swiper img {
		width: 100%;
		height: 100%;
	}
</style>